<template>
  <div class="app-container">
    <div class="filter-container" style="padding-bottom: 25px">

      <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="">
          <el-input v-model="listQuery.phone" placeholder="手机号" style="width: 200px;" class="filter-item"  @keyup.enter.native="handleFilter" />
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="listQuery.sex" placeholder="">
            <el-option label="未知" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item >
          <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="getList">
            搜索
          </el-button>
        </el-form-item>
      </el-form>

    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >

      <el-table-column label="ID" prop="id"  align="center" width="50" >
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户昵称" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="头像" align="center">
        <template slot-scope="{row}">
          <div class="demo-image__preview">
            <img :src="row.avatar" alt="" style="width: 50px;height: 50px">
          </div>

        </template>
      </el-table-column>

      <el-table-column label="实名认证" align="center">
        <template slot-scope="{row}">
          <span>{{ row.is_real == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="性别" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sex_zh }}</span>
        </template>
      </el-table-column>


      <el-table-column label="是否禁用" align="center">
        <template slot-scope="{row}">
          <el-switch v-model="row.is_display"
                     :active-value="1"
                     :inactive-value="0"
                     @change=chang(row,row.is_display)>
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="注册时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.created_at}}</span>
        </template>
      </el-table-column>

      <el-table-column label="上次登陆IP" align="center">
        <template slot-scope="{row}">
          <span>{{ row.last_ip}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" v-if="row.username!='admin'" size="mini" @click="handleUpdate(row)" v-permission="'user_index_edit'">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="编辑" :visible.sync="dialogFormVisible">

      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="temp.nickname" />
        </el-form-item>

        <el-form-item label="性别" >
          <el-radio-group v-model="temp.sex">
            <el-radio :label="0">未知</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
    import { usersList, updateUser,updateUserIsDisplay } from '@/api/user'
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination

    export default {
        name: 'users',
        components: { Pagination },

        data(){
            return {
                data: [],
                total:0,
                tableKey:0,
                listLoading: true,
                list: null,
                dialogFormVisible:false,
                listQuery: {
                    page: 1,
                    limit: 20,
                    phone: undefined,
                    sex:undefined
                },
                rules: {
                    nickname: [{ required: true, message: '昵称必填', trigger: 'blur' }],
                },
                dialogStatus: '',
                temp: {
                    id: undefined,
                },
                row:{},
            }
        },
        created() {
            this.getList()
        },
        methods:{
            chang(row,status){

                return new Promise((resolve, reject) => {
                    updateUserIsDisplay({ id: row.id, status: status}).then(response => {

                        this.getList();

                        this.dialogFormVisible = false
                        this.$notify({
                            title: '',
                            message: response.message,
                            type: 'success',
                            duration: 2000
                        })

                        resolve()
                    }).catch(error => {
                        reject(error)
                    })
                });
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },

            handleUpdate(row) {
                this.temp = Object.assign({}, row) // copy obj
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },

            getList() {
                this.listLoading = true
                usersList(this.listQuery).then(response => {

                    this.list = response.data.items
                    this.total = response.data.total

                    setTimeout(() => {
                        this.listLoading = false
                    }, 500)
                })
            },


            resetTemp() {
                this.temp = {
                    'username':'',
                    'password':''
                }
            },
            updateData(){
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)

                        updateUser(tempData).then(() => {

                            this.getList();

                            this.dialogFormVisible = false
                            this.$notify({
                                title: '',
                                message: '编辑成功',
                                type: 'success',
                                duration: 2000
                            })
                        })


                    }
                })
            }
        }
    }
</script>
